<template>
	<view id="rune_runes">
		<scroll-view scroll-y="true">
			<view class="rune_list_wrapper">
				<view class="rune_list">
					<template v-for="rune in runes">
						<view class="rune" :key="'rune'+rune.order">
							<view class="left">
								<view class="img_box">
									<image :src="'/static/img'+rune.src" mode="aspectFit"></image>
								</view>
								<view class="name font">
									{{ rune.name}}
								</view>
							</view>
							<view class="txt font">{{ rune.effect}}</view>
						</view>
					</template>


				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * @typedef {Object} 	Rune
	 * @property {number} 	order 		rune序号
	 * @property {string} 	name  		rune名称
	 * @property {string} 	src   		rune图片存储位置
	 * @property {number} 	effect 		rune等级，不考虑5级以下
	 * @property {string} 	effect_r    跟effect一致，数值被替换成占位符@v，可以通过正则使用
	 * 
	 * @property {number[]} vars    	占位符对应数值
	 * @property {boolean}	unlock    	是否发现
	 * 
	 * 
	 *
	 */

	import RUNES_DATA from "@/data/runes.js";
	export default {
		name: 'c-runes',
		data() {
			return {
				runes: RUNES_DATA
			}
		},
		filters: {}
	};
</script>

<style lang="scss" scoped>
	#rune_runes {
		width: 100%;
		height: 100%;
		background-color: rgb(28, 28, 28);

		uni-scroll-view {
			height: 100%;

			// background-color: chocolate;
			.rune_list_wrapper {
				// box-sizing: border-box;
				// padding: 10rpx 20rpx 40rpx;

				box-sizing: border-box;
				// padding: 10rpx 20rpx 40rpx;
				padding: 20rpx 20rpx calc(var(--window-bottom) + 20rpx);
			}

			.rune_list {
				// display: flex;
				// flex-direction: row;
				// flex-wrap: wrap;

				display: grid;
				grid-gap: 20rpx;
				// grid-template-columns: 50% 50%;
				grid-template-columns: 1fr 1fr;
				// grid-row-gap: 20rpx;
				// grid-column-gap: 20rpx;

				.rune {
					width: 100%;
					height: 200rpx;
					background-color: rgba(22, 32, 21, 255);
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					border-radius: 28rpx;

					.left {
						width: 100rpx;
						display: flex;
						flex-direction: column;
						justify-items: center;

						.img_box {
							margin: 0 5rpx;
							height: 80rpx;

							uni-image {
								height: 100%;
								width: 100%;
							}
						}

						.name {
							font-size: 38rpx;
						}
					}

					.font {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;


						text-align: center;
						color: white;
					}

					.txt {
						width: calc(100% - 100rpx);
						// flex: 1;
						height: 100%;
						padding-right: 4rpx;
						box-sizing: border-box;

						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>